/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

// import { Alert, Button } from 'antd';
import i18n from 'i18next';

import { CommandDialog } from '@amcax/base';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useState, useEffect } from 'react';
import { CenterPoint } from './center-point';
import { BitangentRadius } from './bitangent-radius';
import { CenterRadius } from './center-radius';
import { TwoPointRadius } from './2point-radius';
import { ThreePoint } from './3point';

function CurveDialog({ title, onClose, props }: CurvedCmdDialogParams) {
  const [mode, setMode] = useState<
    | 'center-point'
    | '2curve-radius'
    | 'center-radius'
    | '2point-radius'
    | 'circle-2point-radius'
    | '3point'
    | 'circle-3point'
  >('center-point');

  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    let mode = props?.params?.mode;
    if (mode === 'circle-2point-radius') {
      mode = '2point-radius';
    }
    if (mode === 'circle-3point') {
      mode = '3point';
    }
    setMode(mode ?? 'center-point');
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'>
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='圆类型'>
        <Select
          options={[
            { value: 'center-point', label: '中心和点' },
            { value: '2curve-radius', label: '双切线和半径' },
            { value: 'center-radius', label: '中心和半径' },
            {
              value: '2point-radius',
              label: '两点和半径',
            },
            { value: '3point', label: '三点' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'center-point' && (
        <CenterPoint
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === '2curve-radius' && (
        <BitangentRadius
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'center-radius' && (
        <CenterRadius
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === '2point-radius' && (
        <TwoPointRadius
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {(mode === '3point' || mode === 'circle-3point') && (
        <ThreePoint
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
    </CommandDialog>
  );
}

export const cmdArcOfCircle: CurvedBaseCommand = {
  id: 'CmdArcOfCircle',
  label: 'command.arc-circle-center-point',
  icon: 'commands/curved/arc',
  create: (label, onClose, props) => (
    <CurveDialog
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
